<template>
	<div class="gj-container">
		<div class="phonelistWrap">
			<div class="phonelist-content">
				<el-row class="panel-group el-row" :gutter="20">
					<el-col class="card-panel-col" :span="8">
						<div class="card-panel">
							<div class="card-panel-title-wrapper">
								<div class="panel-title-body">
									<div style="overflow:hidden;">
										<div class="panel-title-left">工单号</div>
										<div class="panel-title-right">产线: 14#加工机</div>
									</div>
									<div class="panel-title-code">WO202108200001</div>
								</div>
							</div>
							<div class="card-panel-description">
								<div style="float:left;margin-top:30px;width:49%;">
									<div class="card-panel-brandy">
										产品名称:
										<span>LSSG30-12′19 V0</span>
									</div>
									<div class="card-panel-brandy">
										产品代码:
										<span>754533</span>
									</div>
								</div>
								<div class="fr" style="float:right;position:relative">
									<div style="text-align:center;font-size:24px;color:#000;margin-bottom:10px;">已报工数量/计划数量</div>
									<el-progress class="workPercent" style="margin-left:40px;" type="circle" :percentage="percentage" stroke-width="12" width="140"></el-progress>
									<span style="position:absolute;top: 116px;left: 33%;line-height: 18px;font-size: 20px;border-top: solid 2px #ccc;padding-top: 5px;">20000<br>/20000</span>
								</div>
							</div>
						</div>
					</el-col>
					<el-col class="card-panel-col" :span="16">
						<div class="card-panel">
							<div class="card-panel-wrapper">
								<div>加工机生产性数据</div>
								<div class="card-panel-left">
									<el-col class="card-panel-item" :span="10">
										<div class="title">产品加工总数(枚)</div>
										<div class="num">62000</div>
									</el-col>
									<el-col class="card-panel-item" :span="8" style="padding-left:0px;padding-right:10px;">
										<div class="title">实际良品总数(枚)</div>
										<div class="num">60000</div>
									</el-col>
									<el-col class="card-panel-item" :span="6" style="padding-left:0px;padding-right:10px;">
										<div class="title">运转速度</div>
										<div class="num">1000</div>
									</el-col>
									<el-col class="card-panel-item" :span="10" style="padding-left:0px;padding-right:10px;margin-top:30px;">
										<div class="title">良品总数(枚)</div>
										<div class="num">61500</div>
									</el-col>
									<el-col class="card-panel-item" :span="8" style="padding-left:0px;padding-right:10px;margin-top:30px;">
										<div class="title">个装品差异(枚)</div>
										<div class="num">300</div>
									</el-col>
								</div>
								<div class="card-panel-right">
									<div class="progress">
										<div style="display:inline-block;width:33%;">
											<div style="margin-bottom:30px;font-size:24px;">画面不良率</div>
											<el-progress type="circle" :percentage="43" stroke-width="12" color="#fd808b" width="140"></el-progress>
										</div>
										<div style="display:inline-block;padding-left:10px;width:33%;">
											<div style="margin-bottom:30px;font-size:24px;">实际不良率</div>
											<el-progress type="circle" :percentage="45" stroke-width="12" color="#f8ba72" width="140"></el-progress>
										</div>
										<div style="display:inline-block;padding-left:10px;width:33%;">
											<div style="margin-bottom:30px;font-size:24px;">修正后不良率</div>
											<el-progress type="circle" :percentage="40" stroke-width="12" color="#bf7cfb" width="140"></el-progress>
										</div>
									</div>
								</div>
							</div>
						</div>
					</el-col>
				</el-row>
				<el-row class="panel-group el-row" :gutter="20">
					<el-col class="card-panel-col" :span="12">
						<div class="card-panel">
								<div class="card-panel-wrapper">
									<div>#1内装机生产性数据 <span style="float:right;color:#666666;">时间: 8:00~9:30</span></div>
									<div class="card-panel-left">
										<el-col class="card-panel-item" :span="12" >
											<div class="title">画面生产数(包)</div>
											<div class="num">9500</div>
										</el-col>
										<el-col class="card-panel-item" :span="12" >
											<div class="title">实际良品数(枚)</div>
											<div class="num">60000</div>
										</el-col>
										<el-col class="card-panel-item" :span="12" style="margin-top:30px;">
											<div class="title">实际生产数(包)</div>
											<div class="num">1000</div>
										</el-col>
										<el-col class="card-panel-item" :span="12" style="margin-top:30px;">
											<div class="title">个装品损耗(枚)</div>
											<div class="num">61500</div>
										</el-col>
									</div>
									<div class="card-panel-right">
										<div class="progress">
											<div style="display:inline-block;width:50%;">
												<div style="margin-bottom:30px;">实际良品箱数</div>
												<el-progress type="circle" :percentage="43" stroke-width="12" color="#6bb3f9" width="140"></el-progress>
											</div>
											<div style="display:inline-block;padding-left:30px;width:50%;">
												<div style="margin-bottom:30px;">内装不良率</div>
												<el-progress type="circle" :percentage="45" stroke-width="12" color="#54d6bb" width="140"></el-progress>
											</div>
										</div>
									</div>
								</div>
							</div>
					</el-col>
					<el-col class="card-panel-col" :span="12">
						<div class="card-panel">
								<div class="card-panel-wrapper">
									<div>#2内装机生产性数据 <span style="float:right;color:#666666;">时间: 8:00-9:30</span></div>
									<div class="card-panel-left">
										<el-col class="card-panel-item" :span="12" >
											<div class="title">画面生产数(包)</div>
											<div class="num">9500</div>
										</el-col>
										<el-col class="card-panel-item" :span="12" >
											<div class="title">实际良品数(枚)</div>
											<div class="num">60000</div>
										</el-col>
										<el-col class="card-panel-item" :span="12" style="margin-top:30px;">
											<div class="title">实际生产数(包)</div>
											<div class="num">1000</div>
										</el-col>
										<el-col class="card-panel-item" :span="12" style="margin-top:30px;">
											<div class="title">个装品损耗(枚)</div>
											<div class="num">61500</div>
										</el-col>
									</div>
									<div class="card-panel-right">
										<div class="progress">
											<div style="display:inline-block;width:50%">
												<div style="margin-bottom:30px;">实际良品箱数</div>
												<el-progress type="circle" :percentage="43" stroke-width="12" color="#6bb3f9" width="140"></el-progress>
											</div>
											<div style="display:inline-block;padding-left:30px;width:50%">
												<div style="margin-bottom:30px;">内装不良率</div>
												<el-progress type="circle" :percentage="45" stroke-width="12" color="#54d6bb" width="140"></el-progress>
											</div>
										</div>
									</div>
								</div>
							</div>
					</el-col>
				</el-row>
				<div style="float:right;"><el-button type="primary">关闭工单</el-button></div>
			</div>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import moment from 'moment';
export default {
	components: {},
	data() {
		return {
			userLoading: true,
			dialogVisible_user: false,
			dialogVisible_edit: false,
			//搜索数据
			searchConf: {
				customerName: '',
				businessName: '',
				projectName: ''
			},
			tableData: [
				{
					id: '1',
					time: '08:32',
					timelength: '40',
					errorName: '吸收体断料',
					logName: 'Z-2中央吸收纸',
					remarks: '胶带贴复位置偏高'
				},
				{
					id: '1',
					time: '08:32',
					timelength: '40',
					errorName: '吸收体断料',
					logName: 'Z-2中央吸收纸',
					remarks: '胶带贴复位置偏高'
				},
				{
					id: '1',
					time: '08:32',
					timelength: '40',
					errorName: '吸收体断料',
					logName: 'Z-2中央吸收纸',
					remarks: '胶带贴复位置偏高'
				},
				{
					id: '1',
					time: '08:32',
					timelength: '40',
					errorName: '吸收体断料',
					logName: 'Z-2中央吸收纸',
					remarks: '胶带贴复位置偏高'
				},
				{
					id: '1',
					time: '08:32',
					timelength: '40',
					errorName: '吸收体断料',
					logName: 'Z-2中央吸收纸',
					remarks: '胶带贴复位置偏高'
				}
			],
			percentage:'100'
		};
	},
	computed: {
		...mapGetters(['componentTitle'])
	},
	mounted() {},
	methods: {
		tableRowClassName({ row, rowIndex }) {
			if (rowIndex % 2 == 1) {
				return 'gray-row';
			}
			return '';
		},
		skipRouter(path){
			this.$router.push({ path: '/system'+path })
		}
	}
};
</script>
<style lang="scss">
.gcount {
	.el-progress-bar__outer {
		background-color: #dcf2ff;
		border-radius: 0px 100px 100px 0px !important;
		.el-progress-bar__inner {
			border-radius: 0px 100px 100px 0px !important;
			.el-progress-bar__innerText {
				position: absolute;
				top: 0px;
				color: #51bdff;
				font-size: 30px;
			}
		}
	}
}
.n1count {
	.el-progress-bar__outer {
		background-color: #dbf6f1;
		border-radius: 0px 100px 100px 0px !important;
		.el-progress-bar__inner {
			border-radius: 0px 100px 100px 0px !important;
			.el-progress-bar__innerText {
				position: absolute;
				top: 0px;
				color: #49d3ba;
				font-size: 30px;
			}
		}
	}
}
.n2count {
	.el-progress-bar__outer {
		background-color: #fef2e4;
		border-radius: 0px 100px 100px 0px !important;
		.el-progress-bar__inner {
			border-radius: 0px 100px 100px 0px !important;
			.el-progress-bar__innerText {
				position: absolute;
				top: 0px;
				color: #f9bd77;
				font-size: 30px;
			}
		}
	}
}
.el-table .gray-row {
	background: #f7f8f9;
}
.el-progress__text{
	font-size:26px !important;
	font-weight:600;
}
</style>
<style lang="scss" scoped>
.panel-group {
	margin-left: 20px;
	margin-bottom: 20px;
	.card-panel {
		position: relative;
		overflow: hidden;
		color: #666;
		background: #fff;
		-webkit-box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
		box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
		border-color: rgba(0, 0, 0, 0.05);
		border-radius: 20px;
		.card-panel-title-wrapper {
			background: url(../../../assets/img/cardBg.png) 0 0 no-repeat;
			width: 100%;
			height: 150px;
			background-size: cover;
			.panel-title-body {
				padding: 20px;
				overflow: hidden;
				.panel-title-left {
					float: left;
					background: #f9f9f9;
					border-radius: 28px 28px 28px 0;
					padding: 10px 20px;
					font-size: 20px;
				}
				.panel-title-right {
					float: right;
					color: #fff;
					margin-top: 6px;
				}
				.panel-title-code {
					font-size: 42px;
					color: #fff;
					margin-top: 10px;
				}
			}
		}
		.card-panel-description {
			padding: 30px;
			height: 225px;
			.card-panel-brandy {
				color: #666666;
				width:100%;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				display: inline-block;
				vertical-align: middle;
				span {
					color: #000000;
				}
			}
		}
		.card-panel-wrapper {
			padding: 30px 20px;
			font-size: 26px;
			color: #000;
			height: 302px;
			.card-panel-left {
				margin-top: 30px;
				float:left;
				width: 52%;
				margin-bottom:75px;
				.card-panel-item{
				}
				.title{
					text-align:center;
					font-size: 21px;
				}
				.num{
					text-align:center;
					font-size:36px;
					color:#000;
				}
				
			}
			.card-panel-right {
				float: left;
				margin-top: 30px;
				width: 48%;
				.progress {
					width: 100%;
					overflow: hidden;
					text-align:center;
				}
			}
		}
	}
}
</style>
<style scoped>
.workPercent >>> .el-progress__text{
	top: 50px !important;
}

</style>
